<template>
  <view class="container">
    <!-- 顶部组件 -->
    <u-navbar
      :is-back="true"
      :background="{ background: '#fff' }"
      border-bottom
      id="nav-bar"
      title="共享钱包星辉兑换"
    ></u-navbar>

    <view class="withdrawal-wrap">
      <view class="title">兑换至</view>
      <view class="chooseBank" @click="handleShowBankList">
        <view class="left">
          <image :src="bankInfo.logo" mode="aspectFit"></image
          ><text class="name">{{
            bankInfo.bankName +
            (bankInfo.cardNo
              ? '(****' +
                bankInfo.cardNo.substring(
                  bankInfo.cardNo.length - 4,
                  bankInfo.cardNo.length
                ) +
                ')'
              : '')
          }}</text>
        </view>
        <u-icon name="arrow-right" color="#CCCCCC"></u-icon>
      </view>
      <view class="main-box">
        <view class="title">兑换星辉</view>
        <view class="inputBox">
          <image class="star" src="/static/images/icon-star.png" mode="widthFix" />
          <u-input
            v-model="value"
            type="number"
            :border="false"
            placeholder-style="font-size:36rpx;color:#999;"
            placeholder="请输入"
          />
        </view>
        <view class="bottom">
          <view class="left"
            >可兑换星辉：
            <text class="num">{{ count || 0 }}</text>
            <text class="btn" @click="handleFullVWithdrawal"> 全部兑换 </text>
          </view>
          <view class="right" @click="handleWithdrawal">兑换</view>
        </view>
      </view>

      <view class="agreement">
        <view class="agreement-in">
          <u-checkbox
            v-model="check"
            size="30rpx"
            active-color="#C5A27F"
            label-disabled
            @change="checkboxChange"
          >
            <view class="agreement-text">
              我已阅读并同意<text>《星辉兑换协议》</text>
            </view>
          </u-checkbox>
        </view>
      </view>

      <view class="tipBox">
        <view class="tip">
          <text>兑换说明:平台服务费:9%+3元/笔</text>
          <text>可兑换时间:10:00-18:00</text>
        </view>
      </view>
      <view class="dhxzBox">
        <image class="dhxz" src="/static/images/dhxz.png" mode="widthFix" />
        <text class="dhxz-title">兑换须知</text>
        <view class="dhxzBox-content">
          <view class="text">
            根据您与本平台签署的协议,您不得蓄意将本平台已入网商户转移至其他平台,您不得发表恶意言论侵害本平台的合法权益,您不得提供虚假资料恶意套取本平台任何收益,如有发现伙伴存在以上行为本平台可能会停止对您提供服务,且您应承担对本台或其他伙伴造成的相应损失,并追回往期所发放的全部收益!</view
          >
        </view>
      </view>
    </view>

    <!-- 选择银行卡 -->
    <u-popup v-model="showBankList" mode="bottom" :closeable="true" border-radius="20">
      <view class="bankList">
        <view class="title">选择银行卡</view>
        <view
          class="item"
          v-for="item in bankList"
          :key="item.id"
          @click.stop="handleChooseBankCard(item)"
        >
          <view class="left">
            <image :src="item.logo" mode="aspectFit"></image
            ><text class="name">{{
              item.bankName +
              (item.cardNo
                ? '(****' +
                  item.cardNo.substring(item.cardNo.length - 4, item.cardNo.length) +
                  ')'
                : '')
            }}</text>
          </view>
        </view>
        <view class="addBank" @click="handleAddBankCard">+添加新的结算卡</view>
      </view>
    </u-popup>

    <!-- 确认提现 -->
    <u-popup
      v-model="showConfirmWithdrawal"
      mode="center"
      width="90%"
      :closeable="true"
      border-radius="20"
    >
      <view class="confirmWithdrawal">
        <view class="title">共享钱包星辉兑换</view>
        <view class="num">2579.00</view>
        <view class="other">
          <text>服务费</text>
          <text>9%+3元/笔</text>
        </view>
        <view class="sureBtn">确认兑换</view>
      </view>
    </u-popup>

    <u-modal v-model="showModal" width="80%" :showTitle="false" :mask-close-able="false">
      <view slot="default" class="modal">
        <image class="modal-img" src="/static/images/icon-success.png" mode="widthFix" />
        <view class="modal-content">兑换成功！</view>
        <view class="modal-detail">预计2小时内到账</view>
      </view>
    </u-modal>

    <js-codeDialog :show='showCodeDialog' :tip='tip' :phone='phone'></js-codeDialog>
  </view>
</template>
<script>
import service from '@/common/service.js';
import { showToast } from '@/common/utils.js';
import jsCodeDialog from '@/components/js-codeDialog';

export default {
  components: {
    jsCodeDialog
  },
  data() {
    return {
      showBankList: false,
      bankList: [],
      myAccount: {},
      myLoanData: {},
      bankId: '',
      bankInfo: { name: '选择银行卡', bankName: '选择银行卡' },
      type: 'cash',
      count: 0,
      value: 0,
      withType: 0,
      showConfirmWithdrawal: false,
      showModal: false,
      showCodeDialog: false,
      phone:'18888888888',
      tip:'兑换星辉 2579.00'
    };
  },
  onLoad(options) {
    this.count = Number(options.count);
    this.withType = options.type;
    this.getMyAllBankCard();
    this.getMyLoanData();
  },
  methods: {
    checkboxChange(value) {},
    getMyAllBankCard() {
      const that = this;
      const param = {};
      service.getMyAllBankCard(
        param,
        function (res) {
          if (res && res.data) {
            let bankList = res.data;
            let aliPay = {
              name: '支付宝',
              bankName: '支付宝',
              imgUrl: '',
              logo: '/static/images/icon-zfb.png',
              code: 'AliPay',
              id: 0,
              createTime: '',
              updateTime: '',
              state: 0,
            };
            // bankList.unshift(aliPay);
            // that.bankInfo = aliPay;
            if (bankList.length > 0) {
              that.bankInfo = bankList[0];
            }
            that.bankList = bankList;
          }
        },
        function (res) {}
      );
    },
    getMyLoanData() {
      const that = this;
      const param = {};
      service.myLoanData(
        param,
        function (res) {
          if (res && res.data) {
            that.myLoanData = res.data;
          }
        },
        function (res) {}
      );
    },
    handleShowBankList() {
      this.showBankList = true;
    },
    handleChooseBankCard(data) {
      this.bankInfo = data;
      this.showBankList = false;
    },
    viewDetail() {
      uni.navigateTo({
        url: '/pages/my/withdrawalDetail?type=' + this.withType,
      });
    },
    handleFullVWithdrawal() {
      this.value = this.count;
    },
    handleWithdrawal() {
      const that = this;
      if (that.bankInfo.code !== 'AliPay' && !that.bankInfo.id) {
        showToast('请选择兑换至');
        return;
      }
      if (!this.value) {
        showToast('请输入兑换数量');
        return;
      }
      const param = {
        bankId: that.bankInfo.id,
        amount: Number(this.value),
        withType: Number(this.withType),
        type: that.bankInfo.code === 'AliPay' ? 1 : 0, //1是支付宝，0是银行卡
      };
      service.withdrew(
        param,
        function (res) {
          if (res && res.status === 1) {
            showToast('提现成功，即将跳转');
            setTimeout(() => {
              uni.switchTab({
                url: '/pages/my/index',
              });
            }, 1500);
          } else {
            showToast(res.message);
          }
        },
        function (res) {
          showToast(res.message);
        }
      );
    },
    handleAddBankCard() {
      uni.navigateTo({
        url: '/pages/sharedBenefits/bindSettlementCard',
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
}

.container {
  width: 100%;
  min-height: 100vh;
  padding: 40rpx 20rpx 60rpx;
  text-align: center;
  background-color: #f5f5f5;
}

.withdrawal-wrap {
  width: 100%;

  .title {
    width: 100%;
    font-size: 30rpx;
    font-weight: bold;
    color: #222222;
    text-align: left;
  }

  .titleRemark {
    width: 100%;
    margin-top: -35rpx;
    font-size: 24rpx;
    color: #b27700;
    text-align: right;
  }

  .chooseBank {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 0;

    .left {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;

      image {
        width: 62rpx;
        height: 62rpx;
        background: #ffffff;
        border: 1px solid #cccccc;
        border-radius: 50%;
      }

      .name {
        margin-left: 20rpx;
        font-size: 26rpx;
        font-weight: bold;
        color: #222222;
      }
    }
  }

  .main-box {
    padding: 30rpx;
    background-color: #ffffff;
    border-radius: 10rpx;

    .inputBox {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      margin-top: 30rpx;
      border-bottom: 1rpx solid #e6e6e6;

      ::v-deep .u-input__input {
        font-size: 60rpx;
      }

      .star {
        margin-top: 10rpx;
        margin-right: 10rpx;
        width: 32rpx;
        height: 32rpx;
      }

      .unit {
        margin-top: 10rpx;
        margin-right: 16rpx;
        width: 32rpx;
        height: 32rpx;
        line-height: 32rpx;
        color: #222222;
      }
    }

    .bottom {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-top: 30rpx;
      width: 100%;

      .left {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        text-align: left;
        line-height: 1;

        .star {
          width: 24rpx;
          height: 24rpx;
        }

        .num {
          font-size: 26rpx;
          font-weight: 400;
          color: #999999;
        }

        .btn {
          margin-left: 20rpx;
          font-weight: 400;
          font-size: 26rpx;
          color: #b7926e;
        }
      }

      .right {
        width: 152rpx;
        height: 50rpx;
        line-height: 50rpx;
        font-size: 24rpx;
        font-weight: normal;
        color: #ffffff;
        background: linear-gradient(90deg, #d9b189, #c5a27f);
        border-radius: 25rpx;
      }
    }
  }
}

.agreement {
  margin-top: 40rpx;
  width: 100%;
  z-index: 99;
  .agreement-in {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    text-align: left;
  }
  .agreement-text {
    color: #999393;
    font-size: 24rpx;
    font-weight: 500;
    line-height: 1;
    text {
      color: #b7926e;
    }
  }
}

.tipBox {
  margin-top: 30rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;

  .tip {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 24rpx;
    font-weight: 400;
    color: #999999;
    line-height: 1.3;
    text-align: left;
  }
  .btn {
    font-size: 24rpx;
    font-weight: 400;
    color: #b27700;
    line-height: 1;
  }
}

.dhxzBox {
  position: relative;
  margin-top: 30rpx;
  width: 100%;
  height: auto;
  .dhxz {
    width: 100%;
    height: auto;
  }
  .dhxz-title {
    position: absolute;
    top: 50rpx;
    left: 30rpx;
    font-weight: 800;
    font-size: 28rpx;
    color: #ffeacc;
  }
  .dhxzBox-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 106rpx 30rpx 30rpx;

    .text {
      width: 100%;
      height: 100%;
      padding: 24rpx;
      font-weight: 500;
      font-size: 24rpx;
      color: #333333;
      line-height: 1.5;
      background: #ffffff;
      border-radius: 16rpx;
      text-align: left;
    }
  }
}

.margin-top-60 {
  margin-top: 60rpx;
}

.margin-top-40 {
  margin-top: 40rpx;
}

.bankList {
  width: 100%;
  padding: 20rpx 30rpx 150rpx;

  .title {
    margin-bottom: 20rpx;
    font-size: 36rpx;
    font-weight: bold;
    color: #222222;
  }

  .item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 0;

    .left {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;

      image {
        width: 62rpx;
        height: 62rpx;
        background: #ffffff;
        border: 1px solid #cccccc;
        border-radius: 50%;
      }

      .name {
        margin-left: 20rpx;
        font-size: 26rpx;
        font-weight: bold;
        color: #222222;
      }
    }
  }

  .addBank {
    position: absolute;
    left: 30rpx;
    bottom: 40rpx;
    width: calc(100% - 60rpx);
    height: 98rpx;
    line-height: 98rpx;
    padding: 0 20rpx;
    font-weight: bold;
    font-size: 26rpx;
    color: #333333;
    text-align: left;
    background: #f5f5f5;
    border-radius: 20rpx;
  }
}

.confirmWithdrawal {
  width: 100%;
  padding: 50rpx 30rpx 30rpx;
  line-height: 1;
  text-align: center;
  .title {
    width: 100%;
    font-weight: bold;
    font-size: 28rpx;
    color: #222222;
    text-align: center;
  }
  .num {
    margin-top: 50rpx;
    font-family: DIN, sans-serif;
    font-weight: bold;
    font-size: 60rpx;
    color: #333333;
  }
  .other {
    display: flex;
    justify-content: space-between;
    margin-top: 40rpx;
    width: 100%;
    font-weight: 500;
    font-size: 26rpx;
    color: #999999;
    text:last-child {
      color: #333333;
    }
  }
  .sureBtn {
    margin-top: 50rpx;
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    font-weight: bold;
    font-size: 32rpx;
    color: #ffffff;
    background: linear-gradient(90deg, #332108, #201403);
    border-radius: 16rpx;
  }
}

.modal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 30rpx;
  line-height: 1;
  .modal-img {
    width: 110rpx;
    height: 110rpx;
  }
  .modal-content {
    margin-top: 20rpx;
    width: 100%;
    font-weight: bold;
    font-size: 28rpx;
    color: #333333;
  }
  .modal-detail {
    margin-top: 20rpx;
    font-weight: 400;
    font-size: 28rpx;
    color: #999999;
    line-height: 1.5;
    width: 100%;
    text-align: center;
  }
}
</style>
